<template>
  <view v-if="shenheStatus == 0" class="page">
    <view v-if="data">
      <view class="data" v-for="(item, i) of data" :key="i">
        <pageHead :item="item"></pageHead>
        <pageGoodItem :item="item"></pageGoodItem>

        <view class="info">
          <view class="name"> 商品评分 </view>
          <u-rate
            :count="item.count"
            :size="50"
            v-model="item.form.score"
            gutter="24"
            inactiveColor="#F2F2F2"
            activeColor="#F84E18"
          ></u-rate>
          <view class="s1">
            {{ getScoreText(item.form.score) }}
          </view>
        </view>

        <view class="tag">
          <view
            v-for="(el, u) of tag"
            @click="handle('content', item, u)"
            :key="i"
            class="item"
            >{{ el }}</view
          >
        </view>

        <textarea v-model="item.form.content"></textarea>

        <toolsFile
          :fileList="item.form.pic_list"
          @success="handle('file', item, $event, i)"
          @remove="handle('remove', item, $event, i)"
        ></toolsFile>

        <view class="page-footer">
          <view class="btn">
            <view class="let" @click="checked = !checked">
              <view class="radio">
                <i class="iconfont icon-xuanzekuangmoren" v-if="!checked"></i>
                <i class="iconfont icon-success-fill" v-else></i>
                匿名
              </view>
              <view class="des">匿名会隐藏头像和昵称</view>
            </view>
            <view class="rig" @click="submit">发布评价</view>
          </view>
        </view>
      </view>
    </view>
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from "@/components/shenhe/shenhe";
import { orderGoodsInfo } from "@/api/marketing/callOut";
import pageGoodItem from "../components/page-good-item.vue";
import pageHead from "../components/page-head.vue";
import toolsFile from "@/components/tools/tools-file";

export default {
  components: {
    pageGoodItem,
    pageHead,
    toolsFile,
  },

  data() {
    return {
      id: undefined,
      goods_id: undefined,
      data: null,
      count: 5,
      checked: false,
      tag: [],
    };
  },

  computed: {
    getScoreText() {
      return (score) => {
        let str = "";
        switch (score) {
          case 1:
            str = "很差";
            break;

          case 2:
            str = "较差";
            break;

          case 3:
            str = "一般";
            break;

          case 4:
            str = "较好";
            break;

          case 5:
            str = "非常好";
            break;
        }

        return str;
      };
    },
  },

  async onLoad(opi) {
    try {
      this.id = opi.id;
      this.goods_ids = decodeURIComponent(opi.goods_ids);
      const res = await orderGoodsInfo({
        id: opi.id,
        goods_ids: this.goods_ids,
      });
      if (!res.code) {
        const data = JSON.parse(JSON.stringify(res.data));

        this.data = data.map((el) => {
          el.form = {
            score: "",
            content: "",
            pic_list: [],
          };

          el.count = 5;
          return el;
        });

        this.tag = this.data[0].tag;
        return;
      }
      this.$utils.toast(res.msg);
    } catch (error) {}
  },

  methods: {
    async submit() {
      let data = JSON.parse(JSON.stringify(this.data));
      if (!data.every((el) => el.form.score))
        return this.$utils.toast("请选择评分！");

      data = data.map((el) => {
        return {
          ...el.form,
          order_detail_id: el.id,
          goods_id: el.goods_id,
        };
      });

      const res = await this.$allrequest.order.comment(
        {
          order_id: this.id,
          type: "mall",
          is_virtual: this.checked ? 1 : 0,
          goods_list: JSON.stringify(data),
        },
        true
      );

      if (!res.code) {
        this.$utils.showModal("提示", "评论成功！", false, () => {
          uni.navigateBack({
            delta: 1,
          });
        });

        return;
      }

      this.$utils.toast(res.msg);
    },

    handle(type, item, params, index) {
      let url = item.form.pic_list;

      switch (type) {
        case "content":
          this.$set(
            item.form,
            "content",
            (item.form.content += this.tag[params])
          );
          break;

        case "file":
          url.push({
            url: params,
          });

          this.$set(this.data[index].form, "pic_list", url);
          break;

        case "remove":
          url.splice(params, 1);

          this.$set(this.data[index].form, "pic_list", url);
          break;

        default:
          break;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  min-height: 100vh;
  background-color: #f2f2f2;
  padding-bottom: calc(60rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(60rpx + env(safe-area-inset-bottom));
}

.data {
  margin-bottom: 20rpx;
  padding: 30rpx 24rpx;
  background: #fff;
}

.info {
  margin-top: 24rpx;
  padding-top: 24rpx;
  display: flex;
  align-items: center;
  border-top: 1px solid #f1f1f1;

  .name {
    font-weight: bold;
    font-size: 28rpx;
  }

  .s1 {
    color: #8c8c8c;
    font-size: 24rpx;
  }
}

.tag {
  display: flex;
  flex-wrap: wrap;

  .item {
    margin: 24rpx 24rpx 0 0;
    padding: 12rpx 24rpx;
    font-size: 24rpx;
    border-radius: 32px;
    border: 1px solid #b6b6b6;
    color: #8c8c8c;
  }
}

textarea {
  margin: 20rpx 0;
  width: 100%;
  height: 200rpx;
  font-size: 24rpx;
  color: #262626;
  font-weight: bold;
}

.page-footer {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 9;
  display: flex;
  width: 100%;
  background: #fff;
  padding-bottom: calc(constant(safe-area-inset-bottom));
  padding-bottom: calc(env(safe-area-inset-bottom));

  .btn {
    padding: 10rpx 36rpx;
    display: flex;
    flex: 1;
    overflow: hidden;
  }

  .let {
    flex: 1;
    overflow: hidden;
    margin-right: 20rpx;
  }

  .radio {
    display: flex;
    align-items: center;
  }

  .des {
    font-size: 24rpx;
    color: #8c8c8c;
  }

  .iconfont {
    margin-right: 10rpx;
    font-size: 40rpx;
  }

  .rig {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 48rpx;
    height: 80rpx;
    font-size: 32rpx;
    color: #fff;
    background: #f0250e;
    border-radius: 32px;
  }
}

.icon-success-fill {
  color: #f0250e;
}
</style>
